<script lang="tsx" setup>
/**
 * 设备开工率
 */
import {nextTick, onMounted, onUnmounted, ref, watch} from "vue"
import * as echarts from 'echarts'

/**
 * 定义props
 */
const props = defineProps<{
  passStateDailyData: any
}>()

/**
 * echarts
 */
const chartRef1 = ref()
const chartRef2 = ref()
let myChart1: echarts.ECharts | null = null
let myChart2: echarts.ECharts | null = null

/**
 * 百分比
 */
const rateDaily = ref(0)
const rateWeek = ref(0)

/**
 * 初始化
 */
onMounted(() => {
  initEcharts()
})

/**
 * 取消挂载
 */
onUnmounted(() => {
  if (myChart1 && myChart2) {
    window.removeEventListener('resize', handleResize)
    myChart1.dispose()
    myChart2.dispose()
  }
})

/**
 * 重载echarts大小
 */
const handleResize = () => {
  myChart1?.resize()
  myChart2?.resize()
}

/**
 * 初始化echarts
 */
const initEcharts = () => {
  if (!chartRef1.value) return
  myChart1 = echarts.init(chartRef1.value)
  myChart2 = echarts.init(chartRef2.value)
  const option = {
    grid: {
      top: '10%',
      left: '10%',
      right: '10%',
      bottom: '10%'
    },
    series: [
      {
        type: 'pie',
        radius: ['50%', '70%'],
        label: {
          show: false,
          position: 'center'
        },
        data: [
          {
            value: 0,
            name: '计划产量',
            itemStyle: {
              color: "#009CFF"
            }
          },
          {
            value: 0,
            name: '实际产量',
            itemStyle: {
              color: 'rgba(36, 161, 251, 0.40)'
            }
          }
        ]
      }
    ]
  }
  myChart1.setOption(option)
  myChart2.setOption(option)
  window.addEventListener('resize', handleResize)
}

/**
 * 获取数据
 */
const getData = (newValue: any) => {
  const option1: any = myChart1?.getOption()
  const option2: any = myChart2?.getOption()

  //设置数据
  rateDaily.value = 76
  rateWeek.value = 78

  //设置echarts
  option1.series[0].data[0].value = rateDaily.value
  option1.series[0].data[1].value = 100 - rateDaily.value
  option2.series[0].data[0].value = rateWeek.value
  option2.series[0].data[1].value = 100 - rateWeek.value
  myChart1?.setOption(option1)
  myChart2?.setOption(option2)
}

/**
 * 监视
 */
watch(() => props.passStateDailyData, (newValue) => {
  if (newValue) {
    nextTick(() => {
      getData(newValue)
    })
  }
}, {
  deep: true,
  immediate: true
})
</script>

<template>
  <div class="pass-state-daily">
    <div class="title-box">
      <div class="title-img">
        <img alt="" class="title-img-logout" src="/img/data-cockpit/item-title.png"/>
      </div>
      <div class="title">
        <div class="title-content">设备开工率</div>
      </div>
    </div>
    <div class="form">
      <div class="item">
        <div class="chart">
          <img alt="" class="chart-round" src="/img/data-cockpit/chart-round.png"/>
          <div class="chart-rate">
            {{ rateDaily.toFixed(0) }}%
          </div>
          <div ref="chartRef1" class="chart-logout"></div>
        </div>
        <div class="item-title">
          当日设备开动率
        </div>
      </div>
      <div class="line">
      </div>
      <div class="item">
        <div class="chart">
          <img alt="" class="chart-round" src="/img/data-cockpit/chart-round.png"/>
          <div class="chart-rate">
            {{ rateWeek.toFixed(0) }}%
          </div>
          <div ref="chartRef2" class="chart-logout"></div>
        </div>
        <div class="item-title">
          设备开动率（近7日）
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped src="./index.scss">

</style>